<template>
  <div class="coupon-container">
    <div class="coupon-content">
      <div class="top">
        <div class="left-part">
          <!-- <div class="tag">
            <p>会员专属</p>
          </div> -->

          <div class="info-box">
            <template v-if="item.price > 0">
              <div class="price">
                <p>{{ item.price }}</p>
                <div class="yuan">元</div>
              </div>
            </template>
            <div class="title">{{ item.couponName }}</div>
            <div class="subinfo">
              {{
                item.consumeThreshold > 0
                  ? `（满${item.consumeThreshold}元可用）`
                  : "(无门槛)"
              }}
            </div>
          </div>
          <van-checkbox-group
            v-model="radioValue"
            checked-color="#3758c1"
            style="margin-right: 10px"
            :disabled="disabled"
            :max="1"
            @change="selectCouponChange"
          >
            <van-checkbox :name="item.id"></van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="dash"></div>

      <div class="bottom">
        <div class="left">
          <div class="rules-box">
            <div class="rule">规则</div>
            <div class="triangle"></div>
          </div>
        </div>
        <div class="right">
          <p>
            {{ `${formatTime(item.startTime)}-${formatTime(item.endTime)}` }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/common";
export default {
  name: "coupon",
  props: {
    item: {
      type: Object,
    },
    selectId: {
      type: String,
      default: "",
    },
    type: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      radioValue: [""],
      activeTriangles: {}, // 存储每个index的显示状态
      disabled: false,
    };
  },
  watch: {
    type: {
      handler(newVal) {
        if (newVal == 1) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      },
      immediate: true,
    },
  },
  computed: {},
  methods: {
    handleTriangle(index) {
      // 切换对应index的显示状态
      this.$set(this.activeTriangles, index, !this.activeTriangles[index]);
    },
    handleStatusTitle(id) {
      switch (this.couponList.find((item) => item.id === id).status) {
        case 0:
          return "未使用";
        case 1:
          return "已使用";
        case 2:
          return "已失效";
        default:
          return "";
      }
    },
    selectCouponChange() {
      this.$emit("updteSelectCoupon", this.radioValue);
    },
    formatTime,
  },
  created() {},
  mounted() {
    this.radioValue = [this.selectId];
  },
};
</script>
<style lang="less" scoped>
.coupon-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 50px 0;
  border-radius: 32px;
  box-shadow: 5px 5px 20px #d6d9dd;

  .top {
    position: relative;
    width: 100%;

    .left-part {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      position: relative;
      overflow: hidden;

      .tag {
        position: absolute;
        top: 20px;
        left: -200px;
        width: 500px;
        height: 70px;
        background-color: #2b5ac3;
        rotate: -45deg;
        transform-origin: center center; // 设置旋转中心点

        p {
          font-size: 30px;
          color: white;
          text-align: center;
          line-height: 70px;
          margin: 0;
        }
      }

      .no-tag {
        background-color: #4e5159;
      }

      .info-box {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 50px 0 0 100px;

        .price {
          display: flex;
          align-items: baseline;
          box-sizing: border-box;

          p {
            color: #214186;
            font-weight: 600;
          }

          .yuan {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            color: white;
            border-radius: 50%;
            border: 3px solid white;
            background: linear-gradient(to top, #204086, #4c7bcb);
            transform: translateX(-20px);
          }
        }

        .title {
          font-size: 65px;
          color: #224388;
          font-weight: 600;
        }

        .subinfo {
          font-size: 32px;
          color: #517acf;
          white-space: nowrap;
          margin-right: 15px;
        }
      }
    }
  }

  .dash {
    width: 95%;
    margin: 10px auto;
    border: 1px dashed #dcdfe1;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 15px 50px;
    .left {
      .rules-box {
        display: flex;
        align-items: center;

        .rule {
          color: #696969;
          font-size: 38px;
        }

        .triangle {
          width: 0;
          height: 0;
          border-top: 30px solid #696969;
          border-right: 15px solid transparent;
          border-left: 15px solid transparent;
          margin: 0 20px;
          transition: transform 0.3s ease-in-out;
        }

        .rotated {
          transform: rotate(-180deg);
        }
      }
    }
    .right {
      p {
        font-size: 38px;
        color: #a3a3a3;
      }
    }
  }
}
</style>
